import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import Header from './Header';
import PhotoPreview from './PhotoPreview';
import './Albums.css';

const Albums = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { id } = useParams();
  const [isLoading, setIsLoading] = useState(true);
  const [albums, setAlbums] = useState([]);
  const [selectedAlbum, setSelectedAlbum] = useState(null);
  const [viewMode, setViewMode] = useState('grid'); // 'grid' or 'list'
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showAddPhotosModal, setShowAddPhotosModal] = useState(false);
  const [showShareModal, setShowShareModal] = useState(false);
  const [showPhotoShareModal, setShowPhotoShareModal] = useState(false);
  const [selectedPhoto, setSelectedPhoto] = useState(null);
  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
  const [photoToDelete, setPhotoToDelete] = useState(null);
  const [showPhotoPreview, setShowPhotoPreview] = useState(false);
  const [previewPhotoIndex, setPreviewPhotoIndex] = useState(0);
  const [newAlbum, setNewAlbum] = useState({
    name: '',
    description: '',
    cover: ''
  });
  const [newPhotos, setNewPhotos] = useState([]);

  // Check for mock authentication
  const isAuthenticated = !!localStorage.getItem('mockAuthToken');
  const user = isAuthenticated ? JSON.parse(localStorage.getItem('mockUser') || '{}') : null;

  useEffect(() => {
    // Simulate loading albums data
    setTimeout(() => {
      const mockAlbums = [
        {
          id: 1,
          name: '夏日假期',
          cover: '🏖️',
          photoCount: 42,
          createdDate: '2023-07-15',
          description: '在海边度过的美好时光',
          photos: [
            { id: 101, name: '海滩日出.jpg', date: '2023-07-15', thumbnail: '🌅' },
            { id: 102, name: '沙滩排球.jpg', date: '2023-07-16', thumbnail: '🏐' },
            { id: 103, name: '海边烧烤.jpg', date: '2023-07-17', thumbnail: '🍖' },
            { id: 104, name: '日落余晖.jpg', date: '2023-07-18', thumbnail: '🌇' },
            { id: 105, name: '海浪拍岸.jpg', date: '2023-07-19', thumbnail: '🌊' },
            { id: 106, name: '沙滩城堡.jpg', date: '2023-07-20', thumbnail: '🏰' }
          ]
        },
        {
          id: 2,
          name: '家庭聚会',
          cover: '👨‍👩‍👧‍👦',
          photoCount: 28,
          createdDate: '2023-06-20',
          description: '与家人共度的温馨时刻',
          photos: [
            { id: 201, name: '全家福.jpg', date: '2023-06-20', thumbnail: '👨‍👩‍👧‍👦' },
            { id: 202, name: '生日蛋糕.jpg', date: '2023-06-21', thumbnail: '🎂' },
            { id: 203, name: '家庭晚餐.jpg', date: '2023-06-22', thumbnail: '🍽️' },
            { id: 204, name: '游戏时光.jpg', date: '2023-06-23', thumbnail: '🎮' },
            { id: 205, name: '庭院烧烤.jpg', date: '2023-06-24', thumbnail: '🔥' },
            { id: 206, name: '合影留念.jpg', date: '2023-06-25', thumbnail: '📸' }
          ]
        },
        {
          id: 3,
          name: '城市探索',
          cover: '🌃',
          photoCount: 35,
          createdDate: '2023-05-10',
          description: '探索城市的每个角落',
          photos: [
            { id: 301, name: '城市天际线.jpg', date: '2023-05-10', thumbnail: '🏙️' },
            { id: 302, name: '街头艺术.jpg', date: '2023-05-11', thumbnail: '🎨' },
            { id: 303, name: '咖啡时光.jpg', date: '2023-05-12', thumbnail: '☕' },
            { id: 304, name: '夜景灯光.jpg', date: '2023-05-13', thumbnail: '✨' },
            { id: 305, name: '建筑之美.jpg', date: '2023-05-14', thumbnail: '🏛️' },
            { id: 306, name: '城市公园.jpg', date: '2023-05-15', thumbnail: '🌳' }
          ]
        },
        {
          id: 4,
          name: '自然风光',
          cover: '🏞️',
          photoCount: 56,
          createdDate: '2023-04-05',
          description: '大自然的壮丽景色',
          photos: [
            { id: 401, name: '山川河流.jpg', date: '2023-04-05', thumbnail: '⛰️' },
            { id: 402, name: '森林小径.jpg', date: '2023-04-06', thumbnail: '🌲' },
            { id: 403, name: '湖泊倒影.jpg', date: '2023-04-07', thumbnail: '🏞️' },
            { id: 404, name: '瀑布奇观.jpg', date: '2023-04-08', thumbnail: '💧' },
            { id: 405, name: '日出东方.jpg', date: '2023-04-09', thumbnail: '🌅' },
            { id: 406, name: '星空璀璨.jpg', date: '2023-04-10', thumbnail: '⭐' }
          ]
        },
        {
          id: 5,
          name: '美食记录',
          cover: '🍔',
          photoCount: 23,
          createdDate: '2023-03-15',
          description: '记录每一道美味',
          photos: [
            { id: 501, name: '精致甜点.jpg', date: '2023-03-15', thumbnail: '🧁' },
            { id: 502, name: '家常菜.jpg', date: '2023-03-16', thumbnail: '🍲' },
            { id: 503, name: '异国料理.jpg', date: '2023-03-17', thumbnail: '🍱' },
            { id: 504, name: '街头小吃.jpg', date: '2023-03-18', thumbnail: '🥟' },
            { id: 505, name: '咖啡拉花.jpg', date: '2023-03-19', thumbnail: '☕' },
            { id: 506, name: '水果拼盘.jpg', date: '2023-03-20', thumbnail: '🍉' }
          ]
        },
        {
          id: 6,
          name: '旅行记忆',
          cover: '✈️',
          photoCount: 67,
          createdDate: '2023-02-10',
          description: '世界各地的美好回忆',
          photos: [
            { id: 601, name: '机场出发.jpg', date: '2023-02-10', thumbnail: '✈️' },
            { id: 602, name: '异国风情.jpg', date: '2023-02-11', thumbnail: '🗽' },
            { id: 603, name: '当地美食.jpg', date: '2023-02-12', thumbnail: '🍜' },
            { id: 604, name: '名胜古迹.jpg', date: '2023-02-13', thumbnail: '🏛️' },
            { id: 605, name: '民俗文化.jpg', date: '2023-02-14', thumbnail: '🎭' },
            { id: 606, name: '旅行合影.jpg', date: '2023-02-15', thumbnail: '📸' }
          ]
        }
      ];
      
      // Get user-created albums from localStorage
      const userAlbums = JSON.parse(localStorage.getItem('userAlbums') || '[]');
      
      // Combine mock albums with user-created albums
      const allAlbums = [...userAlbums, ...mockAlbums];
      
      setAlbums(allAlbums);
      
      // If an album ID is provided in the URL, select that album
      if (id) {
        const album = allAlbums.find(a => a.id === parseInt(id));
        if (album) {
          setSelectedAlbum(album);
        }
      }
      
      setIsLoading(false);
    }, 1000);
  }, [id]);

  const handleAlbumClick = (album) => {
    setSelectedAlbum(album);
    navigate(`/albums/${album.id}`);
  };

  const handleBackToAlbums = () => {
    setSelectedAlbum(null);
    navigate('/albums');
  };

  const handlePhotoClick = (photoId) => {
    navigate(`/photo/${photoId}`);
  };

  const handleCreateAlbum = () => {
    setShowCreateModal(true);
  };

  const handleCloseModal = () => {
    setShowCreateModal(false);
    setNewAlbum({
      name: '',
      description: '',
      cover: ''
    });
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewAlbum(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleCreateAlbumSubmit = (e) => {
    e.preventDefault();
    
    if (!newAlbum.name.trim()) {
      alert(t('albums.albumNameRequired'));
      return;
    }
    
    // Create a new album with a unique ID
    const maxId = albums.length > 0 ? Math.max(...albums.map(a => a.id)) : 0;
    const album = {
      id: maxId + 1,
      name: newAlbum.name,
      description: newAlbum.description || t('albums.noDescription'),
      cover: newAlbum.cover || '📁',
      photoCount: 0,
      createdDate: new Date().toISOString().split('T')[0],
      photos: []
    };
    
    // Add the new album to the albums list
    const updatedAlbums = [album, ...albums];
    setAlbums(updatedAlbums);
    
    // Save to localStorage for persistence
    localStorage.setItem('userAlbums', JSON.stringify(updatedAlbums));
    
    // Close the modal and reset form
    handleCloseModal();
    
    // Navigate to the new album
    setSelectedAlbum(album);
    navigate(`/albums/${album.id}`);
  };

  const handleAddPhotos = () => {
    setShowAddPhotosModal(true);
  };

  const handleCloseAddPhotosModal = () => {
    setShowAddPhotosModal(false);
    setNewPhotos([]);
  };

  const handlePhotoUpload = (e) => {
    const files = Array.from(e.target.files);
    
    // Create promises to read each file as a data URL
    const filePromises = files.map((file, index) => {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          resolve({
            id: Date.now() + index,
            name: file.name,
            date: new Date().toISOString().split('T')[0],
            thumbnail: event.target.result, // Use the actual image as thumbnail
            file: file // Store the file object for later use
          });
        };
        reader.readAsDataURL(file);
      });
    });
    
    // Wait for all files to be read
    Promise.all(filePromises).then(photoList => {
      setNewPhotos([...newPhotos, ...photoList]);
    });
  };

  const handleAddPhotosSubmit = () => {
    if (newPhotos.length === 0) {
      alert(t('albums.selectPhotos'));
      return;
    }

    // Update the selected album with new photos
    const updatedAlbum = {
      ...selectedAlbum,
      photos: [...newPhotos, ...selectedAlbum.photos],
      photoCount: selectedAlbum.photoCount + newPhotos.length
    };

    // Update the albums list
    const updatedAlbums = albums.map(album =>
      album.id === selectedAlbum.id ? updatedAlbum : album
    );
    setAlbums(updatedAlbums);
    setSelectedAlbum(updatedAlbum);

    // Save to localStorage
    localStorage.setItem('userAlbums', JSON.stringify(
      updatedAlbums.filter(album => album.id > 6) // Only save user-created albums
    ));

    // Close the modal and reset
    handleCloseAddPhotosModal();
  };

  const handleShare = () => {
    setShowShareModal(true);
  };

  const handleCloseShareModal = () => {
    setShowShareModal(false);
  };

  const handleCopyShareLink = () => {
    const shareUrl = `${window.location.origin}/albums/${selectedAlbum.id}`;
    navigator.clipboard.writeText(shareUrl).then(() => {
      alert(t('albums.linkCopied'));
    }).catch(() => {
      alert(t('albums.copyFailed'));
    });
  };

  const handlePhotoShare = (photo) => {
    setSelectedPhoto(photo);
    setShowPhotoShareModal(true);
  };

  const handleClosePhotoShareModal = () => {
    setShowPhotoShareModal(false);
    setSelectedPhoto(null);
  };

  const handleCopyPhotoShareLink = () => {
    const shareUrl = `${window.location.origin}/photo/${selectedPhoto.id}`;
    navigator.clipboard.writeText(shareUrl).then(() => {
      alert(t('albums.linkCopied'));
    }).catch(() => {
      alert(t('albums.copyFailed'));
    });
  };

  const handleDeletePhoto = (photo) => {
    setPhotoToDelete(photo);
    setShowDeleteConfirmation(true);
  };

  const confirmDeletePhoto = () => {
    if (!photoToDelete) return;
    
    // Update the selected album by removing the photo
    const updatedPhotos = selectedAlbum.photos.filter(photo => photo.id !== photoToDelete.id);
    const updatedAlbum = {
      ...selectedAlbum,
      photos: updatedPhotos,
      photoCount: updatedPhotos.length
    };
    
    // Update the albums list
    const updatedAlbums = albums.map(album =>
      album.id === selectedAlbum.id ? updatedAlbum : album
    );
    setAlbums(updatedAlbums);
    setSelectedAlbum(updatedAlbum);
    
    // Save to localStorage
    localStorage.setItem('userAlbums', JSON.stringify(
      updatedAlbums.filter(album => album.id > 6) // Only save user-created albums
    ));
    
    // Close the confirmation modal
    setShowDeleteConfirmation(false);
    setPhotoToDelete(null);
  };

  const cancelDeletePhoto = () => {
    setShowDeleteConfirmation(false);
    setPhotoToDelete(null);
  };

  const handlePhotoPreview = (photo, index) => {
    setSelectedPhoto(photo);
    setPreviewPhotoIndex(index);
    setShowPhotoPreview(true);
  };

  const handleClosePhotoPreview = () => {
    setShowPhotoPreview(false);
    setSelectedPhoto(null);
    setPreviewPhotoIndex(0);
  };

  const handleNextPhoto = () => {
    if (!selectedAlbum || previewPhotoIndex >= selectedAlbum.photos.length - 1) return;
    
    const nextIndex = previewPhotoIndex + 1;
    const nextPhoto = selectedAlbum.photos[nextIndex];
    setSelectedPhoto(nextPhoto);
    setPreviewPhotoIndex(nextIndex);
  };

  const handlePrevPhoto = () => {
    if (!selectedAlbum || previewPhotoIndex <= 0) return;
    
    const prevIndex = previewPhotoIndex - 1;
    const prevPhoto = selectedAlbum.photos[prevIndex];
    setSelectedPhoto(prevPhoto);
    setPreviewPhotoIndex(prevIndex);
  };

  const handleDownloadPhoto = () => {
    if (!selectedPhoto) return;
    
    // Create a temporary link element to download the photo
    const link = document.createElement('a');
    link.href = selectedPhoto.thumbnail;
    link.download = selectedPhoto.name;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  if (!isAuthenticated) {
    navigate('/auth');
    return null;
  }

  return (
    <div className="albums-container">
      <Header />
      <div className="albums-content">
        {selectedAlbum ? (
          // Album Detail View
          <div className="album-detail">
            <div className="album-header">
              <button className="back-btn" onClick={handleBackToAlbums}>
                ← {t('albums.backToAlbums')}
              </button>
              <div className="album-info">
                <h1 className="album-title">{selectedAlbum.name}</h1>
                <p className="album-description">{selectedAlbum.description}</p>
                <div className="album-meta">
                  <span>{selectedAlbum.photoCount} {t('albums.photos')}</span>
                  <span>{t('albums.created')}: {selectedAlbum.createdDate}</span>
                </div>
              </div>
              <div className="album-actions">
                <button className="action-btn" onClick={handleAddPhotos}>
                  {t('albums.addPhotos')}
                </button>
                <button className="action-btn" onClick={handleShare}>
                  {t('albums.share')}
                </button>
              </div>
            </div>
            
            <div className="album-photos">
              <div className="view-mode-toggle">
                <button 
                  className={`view-mode-btn ${viewMode === 'grid' ? 'active' : ''}`}
                  onClick={() => setViewMode('grid')}
                >
                  <span className="view-icon">⊞</span>
                  {t('albums.gridView')}
                </button>
                <button 
                  className={`view-mode-btn ${viewMode === 'list' ? 'active' : ''}`}
                  onClick={() => setViewMode('list')}
                >
                  <span className="view-icon">☰</span>
                  {t('albums.listView')}
                </button>
              </div>
              
              {viewMode === 'grid' ? (
                <div className="photo-grid">
                  {selectedAlbum.photos.map((photo, index) => (
                    <div
                      key={photo.id}
                      className="photo-item"
                      title={photo.name}
                    >
                      <div className="photo-thumbnail" onClick={() => handlePhotoPreview(photo, index)}>
                        {photo.thumbnail.startsWith('data:') ? (
                          <img src={photo.thumbnail} alt={photo.name} />
                        ) : (
                          <span className="photo-emoji">{photo.thumbnail}</span>
                        )}
                      </div>
                      <div className="photo-info">
                        <h4 className="photo-name">{photo.name}</h4>
                        <p className="photo-date">{photo.date}</p>
                      </div>
                      <div className="photo-actions">
                        <button
                          className="photo-action-btn"
                          onClick={(e) => {
                            e.stopPropagation();
                            handlePhotoShare(photo);
                          }}
                          title={t('albums.sharePhoto')}
                        >
                          🔗
                        </button>
                        <button
                          className="photo-action-btn delete"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDeletePhoto(photo);
                          }}
                          title={t('albums.deletePhoto')}
                        >
                          🗑️
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="photo-list">
                  {selectedAlbum.photos.map((photo, index) => (
                    <div
                      key={photo.id}
                      className="photo-list-item"
                    >
                      <div className="photo-thumbnail" onClick={() => handlePhotoPreview(photo, index)}>
                        {photo.thumbnail.startsWith('data:') ? (
                          <img src={photo.thumbnail} alt={photo.name} />
                        ) : (
                          <span className="photo-emoji">{photo.thumbnail}</span>
                        )}
                      </div>
                      <div className="photo-info" onClick={() => handlePhotoPreview(photo, index)}>
                        <h4 className="photo-name">{photo.name}</h4>
                        <p className="photo-date">{photo.date}</p>
                      </div>
                      <div className="photo-actions">
                        <button
                          className="photo-action-btn"
                          onClick={(e) => {
                            e.stopPropagation();
                            handlePhotoShare(photo);
                          }}
                          title={t('albums.sharePhoto')}
                        >
                          🔗
                        </button>
                        <button
                          className="photo-action-btn delete"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDeletePhoto(photo);
                          }}
                          title={t('albums.deletePhoto')}
                        >
                          🗑️
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ) : (
          // Albums List View
          <div className="albums-list">
            <div className="albums-header">
              <h1 className="albums-title">{t('albums.title')}</h1>
              <p className="albums-subtitle">{t('albums.subtitle')}</p>
              <div className="albums-controls">
                <div className="view-mode-toggle">
                  <button 
                    className={`view-mode-btn ${viewMode === 'grid' ? 'active' : ''}`}
                    onClick={() => setViewMode('grid')}
                  >
                    <span className="view-icon">⊞</span>
                    {t('albums.gridView')}
                  </button>
                  <button 
                    className={`view-mode-btn ${viewMode === 'list' ? 'active' : ''}`}
                    onClick={() => setViewMode('list')}
                  >
                    <span className="view-icon">☰</span>
                    {t('albums.listView')}
                  </button>
                </div>
                <button className="create-album-btn" onClick={handleCreateAlbum}>
                  + {t('albums.createAlbum')}
                </button>
              </div>
            </div>
            
            {isLoading ? (
              <div className="albums-loading">
                <div className="loading-spinner"></div>
                <p>{t('albums.loading')}</p>
              </div>
            ) : (
              <div className={`albums-grid ${viewMode}-view`}>
                {albums.map(album => (
                  <div 
                    key={album.id} 
                    className="album-card"
                    onClick={() => handleAlbumClick(album)}
                  >
                    <div className="album-cover">
                      <span className="album-emoji">{album.cover}</span>
                    </div>
                    <div className="album-details">
                      <h3 className="album-name">{album.name}</h3>
                      <p className="album-description">{album.description}</p>
                      <div className="album-meta">
                        <span>{album.photoCount} {t('albums.photos')}</span>
                        <span>{album.createdDate}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
        
        {/* Create Album Modal */}
        {showCreateModal && (
          <div className="modal-overlay">
            <div className="modal-content">
              <div className="modal-header">
                <h2>{t('albums.createAlbum')}</h2>
                <button className="close-btn" onClick={handleCloseModal}>×</button>
              </div>
              <form onSubmit={handleCreateAlbumSubmit}>
                <div className="form-group">
                  <label htmlFor="name">{t('albums.albumName')}</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={newAlbum.name}
                    onChange={handleInputChange}
                    placeholder={t('albums.albumNamePlaceholder')}
                    required
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="description">{t('albums.albumDescription')}</label>
                  <textarea
                    id="description"
                    name="description"
                    value={newAlbum.description}
                    onChange={handleInputChange}
                    placeholder={t('albums.albumDescriptionPlaceholder')}
                    rows="3"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="cover">{t('albums.albumCover')}</label>
                  <input
                    type="text"
                    id="cover"
                    name="cover"
                    value={newAlbum.cover}
                    onChange={handleInputChange}
                    placeholder={t('albums.albumCoverPlaceholder')}
                  />
                  <small>{t('albums.albumCoverHint')}</small>
                </div>
                <div className="modal-actions">
                  <button type="button" className="cancel-btn" onClick={handleCloseModal}>
                    {t('albums.cancel')}
                  </button>
                  <button type="submit" className="create-btn">
                    {t('albums.create')}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
        
        {/* Add Photos Modal */}
        {showAddPhotosModal && (
          <div className="modal-overlay">
            <div className="modal-content">
              <div className="modal-header">
                <h2>{t('albums.addPhotos')}</h2>
                <button className="close-btn" onClick={handleCloseAddPhotosModal}>×</button>
              </div>
              <div className="add-photos-content">
                <div className="upload-area">
                  <input
                    type="file"
                    id="photo-upload"
                    multiple
                    accept="image/*"
                    onChange={handlePhotoUpload}
                    style={{ display: 'none' }}
                  />
                  <label htmlFor="photo-upload" className="upload-label">
                    <div className="upload-icon">📷</div>
                    <p>{t('albums.clickToUpload')}</p>
                    <p>{t('albums.orDragDrop')}</p>
                  </label>
                </div>
                
                {newPhotos.length > 0 && (
                  <div className="selected-photos">
                    <h3>{t('albums.selectedPhotos')} ({newPhotos.length})</h3>
                    <div className="photo-preview-list">
                      {newPhotos.map(photo => (
                        <div key={photo.id} className="photo-preview-item">
                          <div className="photo-preview-thumbnail">
                            {photo.thumbnail.startsWith('data:') ? (
                              <img src={photo.thumbnail} alt={photo.name} />
                            ) : (
                              <span>{photo.thumbnail}</span>
                            )}
                          </div>
                          <div className="photo-preview-info">
                            <p className="photo-preview-name">{photo.name}</p>
                            <p className="photo-preview-date">{photo.date}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                
                <div className="modal-actions">
                  <button type="button" className="cancel-btn" onClick={handleCloseAddPhotosModal}>
                    {t('albums.cancel')}
                  </button>
                  <button
                    type="button"
                    className="create-btn"
                    onClick={handleAddPhotosSubmit}
                    disabled={newPhotos.length === 0}
                  >
                    {t('albums.addPhotos')}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
        
        {/* Share Modal */}
        {showShareModal && (
          <div className="modal-overlay">
            <div className="modal-content">
              <div className="modal-header">
                <h2>{t('albums.shareAlbum')}</h2>
                <button className="close-btn" onClick={handleCloseShareModal}>×</button>
              </div>
              <div className="share-content">
                <div className="share-info">
                  <h3>{selectedAlbum?.name}</h3>
                  <p>{selectedAlbum?.description}</p>
                  <div className="share-link-container">
                    <input
                      type="text"
                      readOnly
                      value={`${window.location.origin}/albums/${selectedAlbum?.id}`}
                      className="share-link-input"
                    />
                    <button className="copy-link-btn" onClick={handleCopyShareLink}>
                      {t('albums.copyLink')}
                    </button>
                  </div>
                </div>
                
                <div className="share-options">
                  <h4>{t('albums.shareOptions')}</h4>
                  <div className="share-buttons">
                    <button className="share-button">
                      <span className="share-icon">📧</span>
                      {t('albums.shareByEmail')}
                    </button>
                    <button className="share-button">
                      <span className="share-icon">💬</span>
                      {t('albums.shareByMessage')}
                    </button>
                    <button className="share-button">
                      <span className="share-icon">🔗</span>
                      {t('albums.shareBySocial')}
                    </button>
                  </div>
                </div>
                
                <div className="modal-actions">
                  <button type="button" className="cancel-btn" onClick={handleCloseShareModal}>
                    {t('albums.close')}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
        
        {/* Photo Share Modal */}
        {showPhotoShareModal && (
          <div className="modal-overlay">
            <div className="modal-content">
              <div className="modal-header">
                <h2>{t('albums.sharePhoto')}</h2>
                <button className="close-btn" onClick={handleClosePhotoShareModal}>×</button>
              </div>
              <div className="share-content">
                <div className="share-info">
                  <h3>{selectedPhoto?.name}</h3>
                  <p>{t('albums.photoFromAlbum')}: {selectedAlbum?.name}</p>
                  <div className="share-link-container">
                    <input
                      type="text"
                      readOnly
                      value={`${window.location.origin}/photo/${selectedPhoto?.id}`}
                      className="share-link-input"
                    />
                    <button className="copy-link-btn" onClick={handleCopyPhotoShareLink}>
                      {t('albums.copyLink')}
                    </button>
                  </div>
                </div>
                
                <div className="share-options">
                  <h4>{t('albums.shareOptions')}</h4>
                  <div className="share-buttons">
                    <button className="share-button">
                      <span className="share-icon">📧</span>
                      {t('albums.shareByEmail')}
                    </button>
                    <button className="share-button">
                      <span className="share-icon">💬</span>
                      {t('albums.shareByMessage')}
                    </button>
                    <button className="share-button">
                      <span className="share-icon">🔗</span>
                      {t('albums.shareBySocial')}
                    </button>
                  </div>
                </div>
                
                <div className="modal-actions">
                  <button type="button" className="cancel-btn" onClick={handleClosePhotoShareModal}>
                    {t('albums.close')}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
        
        {/* Delete Confirmation Modal */}
        {showDeleteConfirmation && (
          <div className="modal-overlay">
            <div className="modal-content">
              <div className="modal-header">
                <h2>{t('albums.deletePhoto')}</h2>
                <button className="close-btn" onClick={cancelDeletePhoto}>×</button>
              </div>
              <div className="delete-confirmation">
                <p>{t('albums.deletePhotoConfirmation')}</p>
                <p><strong>{photoToDelete?.name}</strong></p>
                <p className="warning-text">{t('albums.deletePhotoWarning')}</p>
              </div>
              <div className="modal-actions">
                <button type="button" className="cancel-btn" onClick={cancelDeletePhoto}>
                  {t('albums.cancel')}
                </button>
                <button type="button" className="delete-btn" onClick={confirmDeletePhoto}>
                  {t('albums.delete')}
                </button>
              </div>
            </div>
          </div>
        )}
        
        {/* Photo Preview Modal */}
        {showPhotoPreview && selectedAlbum && (
          <PhotoPreview
            photos={selectedAlbum.photos}
            currentIndex={previewPhotoIndex}
            onClose={handleClosePhotoPreview}
          />
        )}
      </div>
    </div>
  );
};

export default Albums;